import React from 'react'
import { Route, Switch } from 'react-router'
import { BrowserRouter, Link } from 'react-router-dom'
import './App.css'
// js
import JsPlan1 from './pages/js/plan1.jsx'
import JsPlan2 from './pages/js/plan2.jsx'
// ts
import TsPlan1 from './pages/ts/plan1'
import TsPlan2 from './pages/ts/plan2'
// hooks,useState
import HooksPlan1 from './pages/hooks/plan1.jsx'
import HooksPlan2 from './pages/hooks/plan2.jsx'
import HooksPlan3 from './pages/hooks/plan3.jsx'
// hooks,useContext
import HooksUseContextPlan1 from './pages/hooks-useContext/plan1.jsx'
import HooksUseContextPlan2 from './pages/hooks-useContext/plan2.jsx'
import HooksUseContextPlan3 from './pages/hooks-useContext/plan3.jsx'
// hooks,useReducer
import HooksUseReducerPlan1 from './pages/hooks-useReducer/plan1.jsx'
import HooksUseReducerPlan2 from './pages/hooks-useReducer/plan2.jsx'
// hooks,useReducer,ts
import HooksUseReducerTsPlan1 from './pages/hooks-useReducer-ts/plan1'
import HooksUseReducerTsPlan2 from './pages/hooks-useReducer-ts/plan2'

interface IRouteItem {
  path: string
  title: string
}
const routeList: IRouteItem[] = [
  // js
  { path: '/JsPlan1', title: 'js-plan1' },
  { path: '/JsPlan2', title: 'js-plan2' },
  // ts
  { path: '/TsPlan1', title: 'ts-plan1' },
  { path: '/TsPlan2', title: 'ts-plan2' },
  // hooks,useState
  { path: '/HooksPlan1', title: 'hooks-plan1' },
  { path: '/HooksPlan2', title: 'hooks-plan2' },
  { path: '/HooksPlan3', title: 'hooks-plan3' },
  // hooks,useContext
  { path: '/HooksUseContextPlan1', title: 'hooks-useContext-plan1' },
  { path: '/HooksUseContextPlan2', title: 'hooks-useContext-plan2' },
  { path: '/HooksUseContextPlan3', title: 'hooks-useContext-plan3' },
  // hooks,useReducer
  { path: '/HooksUseReducerPlan1', title: 'hooks-useReducer-plan1' },
  { path: '/HooksUseReducerPlan2', title: 'hooks-useReducer-plan2' },
  // hooks,useReducer,ts
  { path: '/HooksUseReducerTsPlan1', title: 'hooks-useReducer-ts-plan1' },
  { path: '/HooksUseReducerTsPlan2', title: 'hooks-useReducer-ts-plan2' },
]

const App: React.FC = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <header>
          {
            routeList.map((item, i) => {
              return <Link key={i} to={item.path}>{item.title}</Link>
            })
          }
        </header>
        <Switch>
          {/* js */}
          <Route path='/JsPlan1' component={JsPlan1} />
          <Route path='/JsPlan2' component={JsPlan2} />
          {/* ts */}
          <Route path='/TsPlan1' component={TsPlan1} />
          <Route path='/TsPlan2' component={TsPlan2} />
          {/* hooks,useState */}
          <Route path='/HooksPlan1' component={HooksPlan1} />
          <Route path='/HooksPlan2' component={HooksPlan2} />
          <Route path='/HooksPlan3' component={HooksPlan3} />
          {/* hooks,useContext */}
          <Route path='/HooksUseContextPlan1' component={HooksUseContextPlan1} />
          <Route path='/HooksUseContextPlan2' component={HooksUseContextPlan2} />
          <Route path='/HooksUseContextPlan3' component={HooksUseContextPlan3} />
          {/* hooks,useReducer */}
          <Route path='/HooksUseReducerPlan1' component={HooksUseReducerPlan1} />
          <Route path='/HooksUseReducerPlan2' component={HooksUseReducerPlan2} />
          {/* hooks,useReducer,ts */}
          <Route path='/HooksUseReducerTsPlan1' component={HooksUseReducerTsPlan1} />
          <Route path='/HooksUseReducerTsPlan2' component={HooksUseReducerTsPlan2} />
        </Switch>

        {/* {renderRoutes(routes)} */}

      </BrowserRouter>
    </div>
  )
}

export default App
